<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" th:action="@{/insect/add}">
    <h3>添加昆虫信息</h3>
    <p>
        昆虫名：<input name="name" placeholder="请输入昆虫名" type="text">
    </p>
    <p>
        昆虫寿命：<input name="life" placeholder="请输入昆虫寿命" type="text">
    </p>
    <p>
        地域分布：<input name="area" placeholder="请输入地域分布" type="text">
    </p>
    <p>
        首次发现时间：<input name="discoveryTime" type="date">
    </p>
    <p>
        所属分类：
        <select name="cid">
            <option selected value="0">——请选择分类——</option>
            <span th:each="allType : ${allType}">
                <option th:text="${allType.cname}" th:value="${allType.id}"></option>
            </span>
        </select>
    </p>

    <p>
        <input type="submit" value="添加">
        <input onclick="history.back()" type="button" value="返回">
    </p>
</form>

<script src="/js/jquery.js"></script>
<script>
    $(function () {
        $('form').submit(function () {
            let name = $("input[name='name']").val();
            let life = $("input[name='life']").val();
            let area = $("input[name='area']").val();
            let discovery_time = $("input[name='discoveryTime']").val();
            let cid = $("select[name='cid']").val();

            //非空判断
            if (name === "") {
                alert("昆虫名不能为空！");
                return false;
            }
            if (life === "") {
                alert("昆虫寿命不能为空！");
                return false;
            }
            if (area === "") {
                alert("地域分布不能为空！");
                return false;
            }
            if (discovery_time === "") {
                alert("首次发现时间不能为空！");
                return false;
            }
            if (cid === "") {
                alert("所属分类不能为空！");
                return false;
            }

            this.submit();
        })
    })
</script>
</body>
</html>